<template>
    <div class="chaxun">
        <div class="chaxun-q">
            <div class="chaxun-qq">返回</div>
            <div class="c-one">查询首贷企业</div>
            <div class="c-one-q">
                <div class="c-one-qq">
                    <div class="c-one-qqq"></div>
                    <input type="text" placeholder="请输入企业名称或统一信用代码" class="c-one-w" v-model="name">
                </div>
                <div class="c-one-qqqq" @click="setName()">搜索</div>
            </div>

        </div>
        <div class="c-two">TOP5重点产业首贷户数及占比</div>
        <div class="c-three">
            <div class="c-three-q">
                <img src="../../assets/images/dianzi.png" alt="" class="c-three-ee">
                <div class="c-three-qq">电子信息 </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">首贷企业</div>
                    <div class="c-three-ww">32 <span class="c-three-w">户</span></div>
                </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">占比</div>
                    <div class="c-three-ww">18.32<span class="c-three-w">%</span></div>
                </div>
            </div>
            <div class="c-three-q">
                <img src="../../assets/images/dianzi.png" alt="" class="c-three-ee">
                <div class="c-three-qq">装备制造 </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">首贷企业</div>
                    <div class="c-three-ww">32 <span class="c-three-w">户</span></div>
                </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">占比</div>
                    <div class="c-three-ww">18.32<span class="c-three-w">%</span></div>
                </div>
            </div>
            <div class="c-three-q">
                <img src="../../assets/images/dianzi.png" alt="" class="c-three-ee">
                <div class="c-three-qq">生物医药 </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">首贷企业</div>
                    <div class="c-three-ww">32 <span class="c-three-w">户</span></div>
                </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">占比</div>
                    <div class="c-three-ww">18.32<span class="c-three-w">%</span></div>
                </div>
            </div>
            <div class="c-three-q">
                <img src="../../assets/images/dianzi.png" alt="" class="c-three-ee">
                <div class="c-three-qq">先进材料 </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">首贷企业</div>
                    <div class="c-three-ww">32 <span class="c-three-w">户</span></div>
                </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">占比</div>
                    <div class="c-three-ww">18.32<span class="c-three-w">%</span></div>
                </div>
            </div>
            <div class="c-three-q">
                <img src="../../assets/images/dianzi.png" alt="" class="c-three-ee">
                <div class="c-three-qq">新能源汽车 </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">首贷企业</div>
                    <div class="c-three-ww">32 <span class="c-three-w">户</span></div>
                </div>
                <div class="c-three-qqq">
                    <div class="c-three-w">占比</div>
                    <div class="c-three-ww">18.32<span class="c-three-w">%</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            name: 'greer',
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        setName() {
            console.log(this.name);
        },
    }
};
</script>


<style scoped lang="scss">
.chaxun {
    height: 939px;
    border: 1px solid red;
    position: relative;
}

.chaxun-q {
    background-image: url('../../assets/images/di.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 456px;
    overflow: hidden;



    .chaxun-qq {
        margin: 65px 0 0 18px;
        font-size: 17px;
        color: #FFFFFF;
    }

    .c-one {
        text-align: center;
        font-size: 27px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 10px;
        margin-top: 45px;
    }

    .c-one-q {
        overflow: hidden;
        height: 143px;
        background: #FFFFFF;
        opacity: 0.98;
        border-radius: 7px;
        margin: 64px 14px 0 14px;

        .c-one-qq {
            height: 50px;
            background: #F3F3F3;
            border-radius: 7px;
            margin: 16px 17px 0 17px;
            display: flex;
            align-items: center;

            .c-one-qqq {
                width: 16px;
                height: 16px;
                background: #989898;
                margin-left: 18px;
            }

            .c-one-w {
                font-size: 15px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #767676;
                margin-left: 11px;
            }
        }

        .c-one-qqqq {
            font-size: 17px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            height: 44px;
            background: #4B91E7;
            border-radius: 7px;
            line-height: 44px;
            margin: 16px 17px 0 17px;
            text-align: center;
        }
    }


}

.c-two {
    height: 29px;
    background: #BBDAFF;
    border-radius: 13px;
    line-height: 29px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #344270;
    left: 68px;
    right: 68px;
    top: 376px;
    text-align: center;
    position: absolute;


}

.c-three {
    height: 489px;
    border: 1px solid #BBDAFF;
    border-radius: 21px;
    margin: -65px 14px 0 14px;
    background: #FFFFFF;

    .c-three-q {
        border-radius: 9px;
        height: 78px;
        background: linear-gradient(90deg, rgba(245, 246, 249, 0.41), rgba(235, 237, 243, 0.41), rgba(232, 234, 238, 0.41), rgba(230, 231, 236, 0.41));
        opacity: 0.6;
        margin: 33px 22px 0 22px;
        display: flex;
        align-items: center;

        .c-three-ee {
            height: 49px;
            width: 49px;
            margin-left: 14px;
        }

        .c-three-qq {
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 600;
            color: #000000;
            margin-left: 8px;
        }

        .c-three-qqq {
            margin-left: 38px;

            .c-three-w {
                font-size: 13px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #494949;
            }

            .c-three-ww {
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
                font-weight: 600;
                color: #494949;
            }
        }
    }





}</style>